<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, Ref, ref } from 'vue'
import useUserStore from '@/stores/userStore'
import { InternalAxiosRequestConfig } from 'axios'
import UserType from '@/types/userType'
import { loginByPassword, respondentRegistry, changeAccountByPassword, changePassword } from '@/axios/admin/accountReq'
import { useRouter } from 'vue-router'
import Notice from '@/utils/notice'
import AxiosManager from '@/axios/axiosManager'
import ChangePasswordView from './respondent/change-password-view.vue'
let userStore = useUserStore()
//控制注册与登录表单的显示， 默认显示注册

const showPage: Ref<"login" | "changePassword" | "changeAccount" | "registry"> = ref("login");
//校验密码的函数
const checkRePassword = (rule, value, callback) => {
    if (value === "") {
        callback(new Error('请再次输入密码'))
    } else if (value !== registryData.password) {
        callback(new Error('请确保两次密码一致'))
    } else {
        callback()
    }
}
const checkReNewPassword = (rule, value, callback) => {
    if (value === "") {
        callback(new Error('请再次输入新密码'))
    } else if (value !== changePwdData.newPassword) {
        callback(new Error('请确保两次新密码一致'))
    } else {
        callback()
    }
}
let loginData = reactive({
    phone: "",
    password: ""
})
let registryData = reactive({
    phone: "",
    password: "",
    rePassword: "",
})
let changePwdData = reactive({
    phone: "",
    oldPassword: "",
    newPassword: "",
    reNewPassword: ""
})
let changePhoneData = reactive({
    newPhone: "",
    oldPhone: "",
    password: "",
})
//注册
const register = async () => {
    console.log(registryData)
    let result = await respondentRegistry(registryData.phone, registryData.password);
    if (result) Notice.success("注册成功");
    router.push('/login')
}
//登录
const login = async () => {
    //调用接口完成登录
    let result = await loginByPassword(loginData.phone, loginData.password);
    if (result != null) {//如果登录成功
        //把得到的token存储到pinia中
        userStore.userId = result.userId;
        userStore.token = result.token;
        userStore.userType = result.userType;
        console.log(userStore.userId);
        let authInterceptor = (req: InternalAxiosRequestConfig<any>) => {
            req.headers.Authorization = result.token;
            return req;
        }
        AxiosManager.addAllInterceptor("auth", authInterceptor);
        //进行路由跳转
        if (result.userType == UserType.respondent) router.push('/respondent');
        if (result.userType == UserType.mediator) router.push("/mediator");
        if (result.userType == UserType.admin) router.push('/admin');
        if (result.userType == UserType.applicant) router.push('/applicant');
        if (result.userType == UserType.assistant) router.push('/assistant');
    }
}
//修改密码
const changePwd = async () => {
    let res = await changePassword(changePwdData.phone, changePwdData.oldPassword, changePwdData.newPassword);
    if (res) Notice.success("修改密码成功");
    else Notice.error("修改密码失败");
}

const router = useRouter()



//定义函数清空数据模型的函数
const clearregistryData = () => {
    registryData = reactive({
        phone: '',
        password: '',
        rePassword: ''
    })
}
const clearChangePasswordData = () => {
    changePwdData = reactive({
        phone: '',
        oldPassword: '',
        newPassword: '',
        reNewPassword: ''
    })
}
</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-if="showPage == 'registry'" :model="registryData">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input type="number" :prefix-icon="User" placeholder="请输入电话号码" v-model="registryData.phone"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                        v-model="registryData.password"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请再次输入密码"
                        v-model="registryData.rePassword"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="register">
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="() => {
                        showPage = 'login'; clearregistryData()
                    }">
                        ← 返回登录
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-else-if="showPage == 'login'" :model="registryData">
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input :prefix-icon="User" placeholder="请输入电话号码" v-model="loginData.phone"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password" :prefix-icon="Lock" type="password" :show-password="true" placeholder="请输入密码"
                        v-model="loginData.password"></el-input>
                </el-form-item>
                <el-form-item class="flex">
                    <div style="display: flex;flex-direction: row;">
                        <div class="flex" style="margin-right: 15px;">
                            <el-link type="primary" :underline="false" @click="() => {
                                showPage = 'changePassword'; clearChangePasswordData()
                            }">修改密码</el-link>
                        </div>
                        <div class="flex">
                            <el-link type="primary" :underline="false" @click="() => {
                                showPage = 'changeAccount'; clearChangePasswordData()
                            }">修改账号</el-link>
                        </div>
                    </div>

                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="() => {
                        showPage = 'registry'; clearregistryData()
                    }">
                        被申请人请注册 →
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 修改密码表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-else-if="showPage == 'changePassword'"
                :model="changePwdData">
                <el-form-item>
                    <h1>修改密码</h1>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input :prefix-icon="User" placeholder="请输入电话号码" v-model="changePwdData.phone"></el-input>
                </el-form-item>
                <el-form-item prop="oldPassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入旧密码"
                        v-model="changePwdData.oldPassword"></el-input>
                </el-form-item>
                <el-form-item prop="newPassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入新密码"
                        v-model="changePwdData.newPassword"></el-input>
                </el-form-item>
                <el-form-item prop="reNewPassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请再次输入新密码"
                        v-model="changePwdData.reNewPassword"></el-input>
                </el-form-item>
                <!-- 修改密码按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="changePwd()">
                        确认修改
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="() => { showPage = 'login' }">
                        ← 返回登录
                    </el-link>
                </el-form-item>
            </el-form>
            <!--修改账号表单-->
            <el-form ref="form" size="large" autocomplete="off" v-else-if="showPage == 'changeAccount'"
                :model="changePhoneData">
                <el-form-item>
                    <h1>修改账号</h1>
                </el-form-item>
                <el-form-item prop="oldPhone">
                    <el-input :prefix-icon="User" placeholder="请输入旧电话号码" v-model="changePhoneData.oldPhone"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                        v-model="changePhoneData.password"></el-input>
                </el-form-item>
                <el-form-item prop="newPhone">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入新手机号"
                        v-model="changePwdData.reNewPassword"></el-input>
                </el-form-item>
                <!-- 修改密码按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="changePwd()">
                        确认修改
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="() => {
                        showPage = 'login';
                    }">
                        ← 返回登录
                    </el-link>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: url('@/assets/login_bg.jpg') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>